<template>
  <div class="page-tabbar">
    <div class="page-wrap">
      <!--<div class="page-title">Tabbar</div>
      <div>
        <mt-cell class="page-part" title="当前选中" :value="selected" />
      </div>-->
      <mt-header :title="selected">
        <router-link to="/" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item id="通知">
          <!--<mt-cell v-for="n in 10" :title="'餐厅 ' + n" />-->
            <mt-cell title="发布通知" islink to="./Notify">
              <img slot="icon" src="./edit.png" width="24" height="24">
            </mt-cell>

            <mt-cell title="记录" islink to="./NotifyLists">
              <span style="margin-right: 5px;">已发布</span>
              <mt-badge type="success" size="small">10</mt-badge>
            </mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="教师">
        <!--  <mt-cell v-for="n in 5" :title="'订单 ' + n" />-->
          <mt-cell title="查询教师" islink to="./teacherInfo">
            <img slot="icon" src="./edit.png" width="24" height="24">
          </mt-cell>
          <mt-radio
            class="page-part"
            title="根据条件查看扇形图"
            v-model="value1"
            :options="options2"
            @change="changeDiagram"
          />
          <div>
            <mt-cell title="选中的项">{{ value1 }}</mt-cell>
          </div>
          <div class="teagram" style="width:400px;height:400px;">

          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="课程">
          <!--<mt-cell v-for="n in 7" :title="'发现 ' + n" />-->
          <mt-cell title="查看课程" islink to="./Course">
            <img slot="icon" src="./edit.png" width="24" height="24">
          </mt-cell>
          <div class="coursegram" style="width:400px;height:400px;">

          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="课设">
          <div class="page-part">
           <!-- <mt-cell v-for="n in 12" :title="'我的 ' + n" />-->
            <mt-cell title="查看课设" islink to="./CoursePlan">
              <img slot="icon" src="./edit.png" width="24" height="24">
            </mt-cell>
            <div class="graduationgram" style="width:400px;height:400px;">

            </div>
          </div>
          <router-link to="/">
            <mt-button type="danger" size="large">退出</mt-button>
          </router-link>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="通知">
        <img slot="icon" src="./remind.png">
        通知
      </mt-tab-item>
      <mt-tab-item id="教师">
        <img slot="icon" src="./bussiness-man.png">
        教师
      </mt-tab-item>
      <mt-tab-item id="课程">
        <img slot="icon" src="./office.png">
        课程
      </mt-tab-item>
      <mt-tab-item id="课设">
        <img slot="icon" src="./text.png">
        课设
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'page-tabbar',
    data() {
      return {
        value1: '性别',
        selected: '通知',
        options:{
          title: {
            text: '课程分布图'
          },
          tooltip: {},
          legend: {
            data:['课程']
          },
          xAxis: {
            data: ["数据库","人机交互","高数","大学英语"]
          },
          yAxis: {},
          series: [{
            name: '课程',
            type: 'bar',
            data: [5, 20, 36, 10]
          }]
        },
        options1:{
          title: {
            text: '课设分布图'
          },
          tooltip: {},
          legend: {
            data:['课设']
          },
          xAxis: {
            data: ["项目1","项目2","项目3","项目4","项目5","项目6"]
          },
          yAxis: {},
          series: [{
            name: '课设',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        },
        optionDegree:{
          series:[
            {
              name: '访问来源',
              type: 'pie',
              radius: '70%',
              data:[
                {value:235, name:'本科'},
                {value:274, name:'大专'},
                {value:310, name:'博士'},
              ]
            }
          ]
        },
        optionJob:{
          series:[
            {
              name: '访问来源',
              type: 'pie',
              radius: '70%',
              data:[
                {value:235, name:'教师'},
                {value:100, name:'导员'},
                {value:56, name:'教授'},
                {value:310, name:'院长'},
              ]
            }
          ]
        },
        optionSex:{
          series:[
            {
              name: '访问来源',
              type: 'pie',
              radius: '70%',
              data:[
                {value:123, name:'女'},
                {value:274, name:'男'}
              ]
            }
          ]
        }
      };
    },
    methods:{
        changeDiagram:function(){
            if(this.value1=="学历"){
              echarts.init(document.querySelector('.teagram')).setOption(this.optionDegree);
            }else if(this.value1=="性别"){
              echarts.init(document.querySelector('.teagram')).setOption(this.optionSex);
            }
            else{
              echarts.init(document.querySelector('.teagram')).setOption(this.optionJob);
            }
        }
    },
    created(){
      this.options2 = ['性别', '职位', '学历'];
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
   console.log(echarts.init(document.querySelector('.teagram')));
   echarts.init(document.querySelector('.teagram')).setOption(this.optionSex);


     /* this.gram.setOption(this.options);*/
 /*   console.log(echarts);
    console.log(gram);*/
   console.log(echarts.init(document.querySelector('.coursegram')));
   echarts.init(document.querySelector('.coursegram')).setOption(this.options);
   echarts.init(document.querySelector('.graduationgram')).setOption(this.options1);
    }
  };
</script>

<style>
  .page-tabbar {
    overflow: hidden;
    height: 100vh;
  }
  .page-wrap {
    overflow: auto;
    height: 100%;
    padding-bottom: 100px;
  }
</style>
